<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>协议注册</title>
		<style type="text/css">
			#outer {
				width: 500px;
			}

			#outer,
			h3,
			#checkDiv,
			#submitDiv,
			#submitInput {
				margin: 10px auto;
			}

			#checkDiv {
				width: 250px;
			}

			#submitInput {
				display: block;
			}

			#info {
				height: 600px;
				overflow: auto;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				// 为滚动条绑定事件，就是为有滚动条的元素绑定事件
				var info = document.getElementById("info");
				var checkInput = document.getElementById("checkInput");
				var submitInput = document.getElementById("submitInput");
				info.onscroll = function() {
					// 当滚动条滚动到底时，启用并自动勾选协议，并启用注册按钮
					if (parseInt(info.scrollHeight - info.scrollTop) == parseInt(info.clientHeight)) {
						// 自动勾选协议
						checkInput.disabled = false;
						checkInput.checked = true;
						// 启用注册按钮
						submitInput.disabled = false;
					}
				}
				// 为checkInput绑定勾选响应事件
				checkInput.onclick = function(ret) {
					// 如果勾选了协议，则启用注册按钮，否则禁用注册按钮
					if (!checkInput.checked) {
						submitInput.disabled = true;
					}
					else{
						submitInput.disabled = false;
					}
				}
				// 为submit绑定单击响应函数
				submitInput.onclick = function(){
					if(confirm("确认注册吗？")){
						alert("注册成功");
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="outer">
			<h3>亲爱的用户，欢迎注册本网站</h3>
			<p id="info">
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
				亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
			</p>
			<div id="checkDiv">
				<input type="checkbox" name="checkInput" value="1" id="checkInput" disabled="disabled" />我已仔细阅读协议，一定遵守
			</div>
			<div id="submitDiv">
				<input type="submit" id="submitInput" disabled="disabled" value="注册"/>
			</div>
		</div>
	</body>
</html>
